<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=multiple-y-axis
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,'dark');
var app = {};

var option;



var colors = ['#5470C6', '#91CC75', '#EE6666'];

option = {
    color: colors,
title: {
            text: "不同温度下租赁人数的变化趋势",
            padding: 10,
            textStyle: {
                fontSize:20
            }
        },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        right: '20%'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['普通用户', '注册用户', '总人数']
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: ['0.02',
'0.04',
'0.06',
'0.08',
'0.1',
'0.12',
'0.14',
'0.16',
'0.18',
'0.2',
'0.22',
'0.24',
'0.26',
'0.28',
'0.3',
'0.32',
'0.34',
'0.36',
'0.38',
'0.4',
'0.42',
'0.44',
'0.46',
'0.48',
'0.5',
'0.52',
'0.54',
'0.56',
'0.58',
'0.6',
'0.62',
'0.64',
'0.66',
'0.68',
'0.7',
'0.72',
'0.74',
'0.76',
'0.78',
'0.8',
'0.82',
'0.84',
'0.86',
'0.88',
'0.9',
'0.92',
'0.94',
'0.96',
'0.98',
'1.0']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '普通用户',
            min: 0,
           
            position: 'right',
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} 人次'
            }
        },
        {
            type: 'value',
            name: '注册用户',
            min: 0,
           
            position: 'right',
            offset: 80,
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisLabel: {
                formatter: '{value} 人次'
            }
        },
        {
            type: 'value',
            name: '总人数',
            min: 0,
           
            position: 'left',
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors[2]
                }
            },
            axisLabel: {
                formatter: '{value} 人次'
            }
        }
    ],
    series: [
        {
            name: '普通用户',
            type: 'bar',
            data: [32,
56,
88,
66,
170,
338,
672,
1604,
1026,
2884,
3796,
5998,
8752,
6204,
14258,
16734,
19476,
25542,
15802,
30728,
29234,
25906,
32370,
21774,
42804,
42172,
42468,
47826,
25326,
58884,
59218,
65516,
65572,
33172,
74174,
78314,
76786,
65350,
25732,
55440,
37606,
23034,
21112,
10384,
13608,
7492,
2040,
2126,
164,
204]
        },
        {
            name: '注册用户',
            type: 'bar',
            yAxisIndex: 1,
            data: [1392,
1084,
1256,
894,
4858,
8542,
14538,
28562,
17610,
53576,
55072,
77688,
89588,
58060,
134348,
147296,
155072,
172862,
106372,
174890,
162940,
135226,
149760,
87916,
167928,
183528,
185456,
199686,
110134,
240926,
237152,
244454,
246836,
113086,
280422,
248584,
246388,
205970,
80128,
170354,
107102,
66892,
63502,
28164,
42064,
23870,
5340,
6658,
914,
384]
        },
        {
            name: '总人数',
            type: 'line',
            yAxisIndex: 2,
            data: [1424,
1140,
1344,
960,
5028,
8880,
15210,
30166,
18636,
56460,
58868,
83686,
98340,
64264,
148606,
164030,
174548,
198404,
122174,
205618,
192174,
161132,
182130,
109690,
210732,
225700,
227924,
247512,
135460,
299810,
296370,
309970,
312408,
146258,
354596,
326898,
323174,
271320,
105860,
225794,
144708,
89926,
84614,
38548,
55672,
31362,
7380,
8784,
1078,
588]
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>
    